<template>
	<div>
		<aplid-base-crud ref="crud" class="w-100" layout="card" v-bind="{...baseConfig,...$attrs}">
			<template v-slot:column="{ row }">
				<div class="user-card" @click="handleOperate(row)" >
          <img src="@/assets/imgs/default_header_logo.webp" alt="" class="icon-img">
					<div class="footer-btn">
						<p class="text-title">{{ row.buildingName }}（{{row.buildingFloors}}层）</p>
						<p class="text-label">{{row.elevator==1?'有电梯':'无电梯'}}</p>
					</div>
				</div>
			</template>
		</aplid-base-crud>
	</div>
</template>

<script setup lang="ts">
import { baseConfig } from './config'

const emit = defineEmits(['change'])
const handleOperate = (row)=> {
  emit('change',row,2)
}
</script>

<style scoped lang="scss">
.user-card {
	width: 100%;
	min-height: 225px;
	position: relative;
  &:hover {
    cursor: pointer;
  }
  .icon-img {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px 4px 0 0;
    object-fit:cover;
  }
	.footer-btn {
		position: absolute;
		bottom: 0;
		width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
		.text-title {
			font-family: 'Microsoft YaHei Bold';
			font-weight: 700;
			font-size: 18px;
			text-align: left;
			color: #fff;
		}
		.text-label {
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			text-align: left;
			color: #fff;
		}
	}
}
</style>
